<template>
  <div class="wf y flowA">
    <el-carousel :interval="4000" height="400px" indicator-position="outside">
      <el-carousel-item v-for="i in fdata" :key="i.uid" @click="test">
        <img
          style="width: 100%; height: 100%; z-index: 9; object-fit:cover"
          alt="加载失败"
          :src="$api+i.url"
        />
      </el-carousel-item>
    </el-carousel>
    <div v-if="data.fdataType">
      <el-button type="primary" @click="upload">确定修改</el-button>
      <el-button type="primary" @click="$emit('cEvent', 1)">返回</el-button>
      <el-upload
        name="imgFile"
        :action="uploadURL"
        list-type="picture-card"
        :on-success="upSuccess"
        :on-change="upChange"
        :auto-upload="false"
        style="position:absolute; z-index: 9; opacity:0.3;"
        ref="upload"
        :file-list="data.imgs"
        :on-preview="handlePictureCardPreview"
        :on-remove="imgRemove"
        accept=".jpg, .jpeg, .png, .gif, .bmp, .JPG, .JPEG, .PNG, .GIF, .BMP"
      >
        <i slot="default" class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt />
      </el-dialog>
    </div>
  </div>
</template>
<script>
// import name from "./name";
export default {
  // components: { name},
  props: ["fdata", "g4"],
  watch: {
    fdata() {
      this.initData();
    }
  },
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      api: "",
      uploadURL: "/upload_json.php",
      data: {}
    };
  },
  // computed() {return{}},
  created() {
    this.initData();
  },
  methods: {
    test() {
      const a = document.getElementsByTagName("body")[0];

      console.log(123);
      event.stopPropagation();
    },
    initData() {
      let tmp = this.$axios.defaults.baseURL;
      this.api =
        tmp.substr(-1) == "/" || tmp.substr(-1) == "\\"
          ? tmp.substr(0, tmp.length - 1)
          : tmp;
      this.uploadURL = this.api + this.uploadURL;
      if (this.fdata.imgs) {
        if (typeof this.fdata.imgs == "string") {
          this.fdata.imgs = this.fdata.imgs.split("|");
          if (!this.fdata.imgs[this.fdata.imgs.length - 1])
            this.fdata.imgs.pop();
          this.fdata.imgs = this.fdata.imgs.map(item => {
            if (item.substr(0, 1) == "/") item = this.api + item;
            return { name: item.substr(item.lastIndexOf("/") + 1), url: item };
          });
        }
      } else this.fdata.imgs = [];
      if (this.fdata.name == "banner") {
        this.data = {
          table: "items",
          ID: this.fdata.ID,
          name: "banner",
          imgs: this.fdata.imgs
        };
      }
      this.data.fdataType = this.fdata.fdataType;
      // console.log(this.data);
    },
    upload() {
      this.$refs.upload.submit();
    },
    send() {
      // this.$refs.upload.submit();
      const d = {
        cmd: this.data.fdataType,
        val: this.$del(this.$cp(this.data), [
          "createTime",
          "changeTime",
          "useTime",
          "fdataType",
          "pageView",
          "power",
          "user"
        ])
      };
      if (d.val.cars) d.val.cars = d.val.cars.join("|");
      if (d.val.imgs) {
        d.val.imgs = this.$cp(this.fdata.imgs);
        const len = this.api.length;
        d.val.imgs = d.val.imgs.map(a => {
          let ret = a.url;
          if (ret.substr(0, 5) != "blob:") {
            if (ret.substr(0, len) == this.api) ret = ret.substr(len);
            return ret;
          }
        });
        d.val.imgs = d.val.imgs.join("|");
      }
      if (d.val.notice) d.val.notice = d.val.notice.join("|");
      if (d.val.promise) d.val.promise = d.val.promise.join("|");
      if (this.data.itemType < 3)
        d.val = this.$del(d.val, ["beginTime", "endTime"]);
      d.val.token = localStorage.getItem("token");
      // console.log(d);
      this.$axios.post("q.php", d).then(r => {
        this.$emit("cEvent", 1); // 关闭此页面
      });
    },
    upChange() {
      this.fdata.imgs = this.$refs.upload.uploadFiles;
    },
    upSuccess(a, b, c) {
      if (a.error) {
        this.$message.error("不支持此类文件");
        this.handleRemove(b);
      } else {
        this.$message.success("上传成功");
        b.url = this.api + a.url;
        this.fdata.imgs = this.$refs.upload.uploadFiles;
      }
      for (const item of this.$refs.upload.uploadFiles) {
        if (item.status == "ready") {
          return;
        }
      }
      this.send();
    },
    imgRemove(file) {
      let tmp = false;
      if (file.response && !file.response.error) tmp = file.response.url;
      if (file.url.substr(0, 5) != "blob:") tmp = file.url;
      if (tmp) this.$axios.post(this.uploadURL, "del=" + tmp);
      this.fdata.imgs = this.$refs.upload.uploadFiles;
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  }
};
</script>

<style lang="less" scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
